﻿<div id="{{area.Id}}" class="row panel" ng-class="ctrl.activePanel===area.Id ? 'panel-primary' : 'panel-default'" ng-repeat="area in ctrl.areas | orderBy:['SortValue']">
    <div class="panel-heading pointer clearfix" ng-click="ctrl.setActivePanel(area.Id)">
        <span class="panel-title pull-left">{{area.Caption}}</span>

        <span ng-show="area.OnStateCount > 0" class="badge pull-right">
            <span class="glyphicon glyphicon-flash"></span><span ng-bind="area.OnStateCount"></span>
        </span>

    </div>

    <ul class="list-group" ng-show="ctrl.activePanel===area.Id">
        <li class="list-group-item" ng-repeat="component in area.Components | orderBy:['SortValue']">
            <span><img class="icon" ng-src="Content/Images/{{component.Image}}.png" /></span>
            <span>{{component.Caption}}</span>

            <div class="container-fluid" style="padding: 0; padding-top: 5px;" ng-include="component.template"></div>
        </li>
    </ul>
</div>